import React, { PureComponent } from 'react';
import { Form, Input, Select } from 'antd';

const { Option } = Select;

export default class Index extends PureComponent {
  constructor(props) {
    super(props);
    const { data = {} } = props;
    this.state = {
      cnt: data && data.title_name ? data.title_name.length : 0
    }
  }

  onChange = (e) => {
    const value = e.target.value;

    this.setState({ cnt: value ? value.length : 0 });
  }

  render() {
    const { cnt = 0 } = this.state;
    const { form, data = {}, titleTypes = [] } = this.props;
    const { getFieldDecorator } = form;
    const { title_type = {} } = data;

    return (
      <Form layout='vertical'>
        <Form.Item label='头衔类别'>
          {getFieldDecorator('title_type.id', {
            initialValue: title_type.id || undefined,
            rules: [{ required: true, message: '该项为必填项' }],
          })(
            <Select placeholder='请选择头衔类别' size='large'>
              {titleTypes && titleTypes.map(item => {
                return <Option key={item.id} value={item.id}>{item.type_name}</Option>
              })}
            </Select>
          )}
        </Form.Item>
        <Form.Item label='值班头衔'>
          {getFieldDecorator('title_name', {
            initialValue: data.title_name || undefined,
            rules: [{ required: true, message: '该项为必填项' }],
          })(
            <Input
              maxLength={20}
              placeholder='请输入值班头衔'
              size='large'
              suffix={<div style={{ color: '#909399', fontSize: 12 }}>{cnt}/20</div>}
              onChange={this.onChange}
            />
          )}
        </Form.Item>
        <Form.Item label='导出设置'>
          {getFieldDecorator('title_state', {
            initialValue: data.title_state,
            rules: [{ required: true, message: '该项为必填项' }],
          })(
            <Select placeholder='请选择导出设置' size='large'>
              <Option value={1}>在模板中显示</Option>
              <Option value={0}>不在模板中显示</Option>
            </Select>
          )}
        </Form.Item>
      </Form>
    );
  }
}